<script lang="ts" setup>
// -------- 定义组件属性 --------
import { toTypedSchema } from '@vee-validate/zod';
import { z } from 'zod';
import { useForm } from 'vee-validate';
import { commentApi } from '~/utils/api/comment-api';
import { useToast } from '~/components/ui/toast';
import { useUserStore } from '~/composables/store/user-store';

const props = defineProps<{
	articleId: number;
}>();

const { toast } = useToast();
const userStore = useUserStore();

// -------- 查询评论列表 --------

// 网络请求查询评论列表
const { data } = await commentApi.queryCommentListServer(props.articleId);
const commentList = ref(data.value?.data);
const comments = ref(data.value?.data.list ?? []);

// 分页查询
const onPageChange = (value: number) => {
	commentApi.queryCommentListClient(props.articleId, value).then((res) => {
		comments.value = res.data.list ?? [];
	});
};

// -------- 评论提交表单 --------
const formSchema = toTypedSchema(z.object({
	comment: z.string({ required_error: '评论不能为空', message: '请输入评论' }),
}));

const { handleSubmit, handleReset } = useForm({
	validationSchema: formSchema,
});
const onSubmit = handleSubmit(({ comment }) => {
	if (!userStore.isLogin) {
		toast({
			description: '请先登录',
		});
		return;
	}

	commentApi.sendComment(props.articleId, comment).then(async (res) => {
		if (res.code === 200) {
			toast({
				description: '评论成功',
			});
			handleReset();
			// 重新查询评论列表
			const result = await commentApi.queryCommentListClient(props.articleId);
			comments.value = result.data.list ?? [];
		}
		else {
			toast({
				description: res.message.toString(),
			});
		}
	}).catch((err) => {
		toast({
			description: err.data.message.toString(),
		});
	});
});
</script>

<template>
	<div class="bg-card p-8 rounded-lg my-4">
		<!--  输入框  -->
		<form
			class="flex gap-2 w-full"
			@submit="onSubmit"
		>
			<FormField
				v-slot="{ componentField }"
				name="comment"
			>
				<FormItem
					class="w-full"
				>
					<FormControl>
						<Input
							placeholder="输入评论"
							type="text"
							v-bind="componentField"
						/>
					</FormControl>
					<FormMessage />
				</FormItem>
			</FormField>
			<Button type="submit">
				发送
			</Button>
		</form>

		<div
			v-for="item in comments"
			:key="item.commentId"
			class="my-6"
		>
			<CommentItem
				:article-id="articleId"
				:comment="item"
			/>
		</div>
		<Pagination
			v-if="commentList"
			v-slot="{ page }"
			:default-page="1"
			:sibling-count="1"
			:total="commentList.total"
			show-edges
			@update:page="onPageChange"
		>
			<PaginationList
				v-slot="{ items }"
				class="flex items-center justify-center gap-1 w-full"
			>
				<PaginationPrev />

				<template v-for="(item, index) in items">
					<PaginationListItem
						v-if="item.type === 'page'"
						:key="index"
						:value="item.value"
						as-child
					>
						<Button
							:variant="item.value === page ? 'default' : 'outline'"
							class="w-10 h-10 p-0"
						>
							{{ item.value }}
						</Button>
					</PaginationListItem>
					<PaginationEllipsis
						v-else
						:key="item.type"
						:index="index"
					/>
				</template>

				<PaginationNext />
			</PaginationList>
		</Pagination>
	</div>
</template>

<style scoped>

</style>
